import React from "react";
import './index.scss'

export default class Item extends React.Component {
    state ={
        mouse:false
    }
    //鼠标移入移除事件
    handleMouse = (flag) => {
        //因为调用的时候要传值，所以如果不写成高阶函数就会在调用组件被渲染时默认的调用一次。
        return () => {
            this.setState({mouse: flag})
        }
    }

    deleteTodo =(id, flge)=>{
      return (event)=>{

          if (flge){
              this.props.edit(id,event.target.checked);
          }else {
              //确认弹框
              if(window.confirm("确认删除吗")){
                  this.props.edit(id,null);
              }
          }
      }
    }
    render() {
        const {id,name,state}=this.props
        const {mouse}=this.state
        return (
            <div >
                <li
                    style = {{
                         backgroundColor :mouse?'#ddd':'white'
                     }}
                    onMouseEnter={this.handleMouse(true)}
                    onMouseLeave = {this.handleMouse(false)}
                >
                    <label>
                        <input   type="checkbox" defaultChecked={state}   onChange={()=>this.deleteTodo(id,true)}/>
                        <span>{name}</span>
                        <button style = {{display : mouse?'':'none'}} onClick={()=>this.deleteTodo(id,false)}> 删除</button>
                    </label>
                </li>
            </div>
        )
    }
}
